<template>
    <div style="">
        <HotelTop></HotelTop>
        <!--        <RouteTop></RouteTop>-->
        <!--        地区选择开始-->
        <div class="animated fadeInUp" style="width: 100%;">
            <div style="height: 76px;display: flex;justify-content: center;align-items: center;border: 1px solid #EBEBEB">
                <div style="cursor: pointer;padding: 2px 15px;color:#0FC7D1">全部</div>
                <!--                <div style="padding: 2px 15px;">欧洲</div>-->
                <!--                <div style="padding: 2px 15px;">北美</div>-->
                <!--                <div style="padding: 2px 15px;">东南亚</div>-->

            </div>
            <!--        地区选择结束-->

            <!--出行日期开始-->
            <!--            <div style="display: flex;line-height: 40px;height: 40px;width: 1200px;background-color: #FAFAFA;margin: 0 auto;margin-top: 10px">-->
            <!--                <span>出行天数:</span>-->
            <!--                <div style="width: 400px;display: flex;justify-content: space-around">-->
            <!--                    <span style="color: #0FC7D1">全部</span>-->
            <!--                    <span>五日游</span>-->
            <!--                    <span>七日游</span>-->
            <!--                    <span>十四日游</span>-->
            <!--                </div>-->
            <!--            </div>-->
            <div style="background-color: #FAFAFA;display: flex;width: 1200px;margin: 0 auto;border: 1px solid #EBEBEB;margin-top: 5px;">
                <span>筛选条件:</span>
                <div style="width: 400px;display: flex;justify-content: space-around">
                    <!--                    <span style="color: #0FC7D1">推荐</span>-->
                    <!--                    <span>热门</span>-->
                    <span :class="{'color1':low}" class="low" @click="low1" style="cursor: pointer">价格最低</span>
                    <span :class="{'color1':high}" class="high" @click="high1" style="cursor: pointer">价格最高</span>
                </div>
            </div>
            <!--出行日期结束-->
            <!--            列表详情开始-->
            <div v-for="item in hotelList"
                 style="display: flex;width: 1200px;margin: 0 auto;margin-top: 20px;border: 1px solid #EBEBEB;border-radius: 3px">
                <img class="destination-detail-item-img"  style="display: block;width: 350px;height: 195px"
                          :src="item.img"
                          alt="">
                </img>
                <div style="margin-left: 50px;padding-top: 25px">
                    <div>
                        {{item.name}}
                    </div>
                    <div>
                        {{item.description}}
                    </div>
                    <!--                    <div>-->
                    <!--                        出游天数 : 十四日游-->
                    <!--                    </div>-->
                    <!--                    <div>-->
                    <!--                        目的地 : 北欧-->
                    <!--                    </div>-->
                    <!--                    <div>-->
                    <!--                        法国+瑞士+意大利+德国10-14日游欧洲年度爆款超3400人出游含卢浮宫门票蒙帕纳斯大厦登顶-->
                    <!--                    </div>-->
                    <div class="dinggou" @click="toDetailHotel(item.id)"
                         style="color: #46BE8A;border-radius: 6px;padding: 2px 10px;width: 70px;margin-top: 50px;margin-left: 20px;border: 1px solid #46BE8A">
                        查看详情
                    </div>
                </div>
            </div>
            <!--            列表详情结束-->
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <Foot></Foot>
    </div>
</template>

<script>
    import RouteTop from "../components/top/RouteTop";
    import Foot from "../components/bottom/Foot";
    import HotelTop from "../components/top/HotelTop";

    export default {
        created() {
            this.getHotelInfo();
        },
        methods: {
            toDetailHotel(id) {
                this.$router.push({
                    query: {
                        id: id
                    },
                    path: '/detail'
                })
            },
            low1() {
                this.low = true;
                this.high = false;
                this.num = 0;
                this.getHotelInfo();
            },
            high1() {
                this.low = false;
                this.high = true;
                this.num = 1;
                this.getHotelInfo();
            },

            async getHotelInfo() {
                let {data: res} = await this.$http.get('hotel/' + this.num)
                console.log(res);
                this.hotelList = res.data;
            }

        },
        data() {
            return {
                low: true,
                high: false,
                num: 0,
                hotelList: []
            }
        },
        name: "Hotel",
        components: {
            RouteTop,
            Foot,
            HotelTop
        }
    }
</script>

<style scoped>
    .color1 {
        color: #1ECE9C !important;
    }

    .dinggou {
        transition: all 0.5s;
        cursor: pointer;
    }

    .dinggou:hover {
        background-color: #46BE8A;
        color: #ffffff !important;
    }

    .tuijian {
        transition: all 0.4s;
        cursor: pointer;
    }

    .tuijian:hover {
        color: #ffffff !important;
        background-color: #1ECE9C;
    }
</style>